<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <link rel="stylesheet" href="css/reset.min.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/prefixfree.min.js"></script>
</head>

<body>
  <div id="app">
    <main class="main-box">
      <!-- 音乐转盘 -->
      <div class="music-box">
        <div class="dis-box">
          <!-- 光盘 -->
          <div class="dis">
            <!-- <img src="./images/music1.jpg" alt=""> -->
          </div>
        </div>
        <div class="play-box"></div>
        <div class="needle"></div>
      </div>

      <!-- 歌词部分 -->
      <div class="lyric-box">
        <h2 class="title"></h2>
        <div class="text">
          <div class="wrapper">
            <p>暂无歌词</p>
          </div>
        </div>
      </div>
      <!-- 其他组件 -->
      <div class="units-box">
        <div class="left">
          <img class="song-music" src="./images/song_music.png" alt="">
          <img class="go-song-music" src="./images/go_song_music.png" alt="">
        </div>
        <span class="seg"></span>
        <div class="right">
          <span class="listen-music"></span>
          一起听歌
          <img src="./images/go_listen_music.png" alt="">
        </div>
      </div>
    </main>

    <!-- 其他 -->
    <audio src="" id="audioBox" preload="metadata"></audio>
    <div class="mark-image"></div>
    <div class="mark-overlay"></div>


  </div>

  <script>
    /* 动态计算 rem 的换算比例 */
    (function () {
      const app = document.querySelector('#app')
      HTML = document.documentElement
      const computed = function () {
        let orien = Math.abs(window.orientation)
        if (orien === 90) {
          // 切换到横屏
          alert('横屏体验不佳，请您切换到竖屏！')
          app.style.display = 'none'
          return
        }
        // 当前是竖屏
        app.style.display = 'block'
        // 计算 rem 的换算比例
        let deviceW = HTML.clientWidth,
          designW = 375,
          initalRatio = 100

        if (deviceW > 540) deviceW = 540
        // 当前换算比例 = 当前设备的宽度/设计稿宽度（750）* 初始换算比例（100）
        let currentRatio = deviceW / designW * initalRatio
        HTML.style.fontSize = currentRatio + "px"
      }
      computed()
      window.addEventListener('resize', computed)
      // 基于 resize 代替 orientationchange事件：这样可以适配模拟器中，设备的切换场景
    })()
  </script>
  <script src="js/fastclick.js"></script>
  <script src="js/api.js"></script>
  <script src="js/index.js"></script>

</body>

</html>